<template>
	<view class="view-box-01" style="background-image:url(../../static/底图.png); background-size:100%;">
		<view class="view-box-02">
			<view class="view-box-02-01">
				<view class="view-box-03">
					<view>
						人才测评系统
					</view>
					<view>
						<image src="../../static/小标.png" class="view-box-04"></image>
					</view>
				</view>
				<view class="view-box-05">Talent&nbsp;detection&nbsp;system</view>

			</view>

		</view>
		<view class="view-box01" scoped>
			<view v-if="!isRting" class="view-box-08" style="display: flex;" @click="SearchByMonth">
				<view class="view-box-09">
					<view class="text01">个人月度评分查询</view>
					<view class="text02">&nbsp;Search&nbsp; by &nbsp; month</view>
				</view>
				<view class="view-box-10">
					<image src="../../static/月评.png" class="logimg"></image>
				</view>
			</view>
			<view v-if="!isRting"  class="view-box-08" style="display: flex;" @click="QuarterlyEnquiry">
				<view class="view-box-09">
					<view class="text01">个人季度评分查询</view>
					<view class="text02">&nbsp;Search&nbsp; by &nbsp; quarter</view>
				</view>
				<view class="view-box-10">
					<image src="../../static/季评.png" class="logimg"></image>
				</view>
			</view>
			<!-- 查看评分 -->
			<view v-if="isRatings" class="view-box-08" style="display: flex;"
				@click="chakan">
				<view class="view-box-09">
					<view class="text01">查看员工评分</view>
					<view class="text02">&nbsp;View &nbsp; Employee  &nbsp; Ratings</view>
				</view>
				<view class="view-box-10">
					<image src="../../static/给领导.png" class="logimg"></image>
				</view>
			</view>
			<!-- 给领导评分部分 -->
			<view v-if="(isLeaderRating && !isRting) || isGuest" class="view-box-08" style="display: flex;"
				@click="JumpToTatingPage">
				<view class="view-box-09">
					<view class="text01">中层评分管理</view>
					<view class="text02">&nbsp;Mid-level&nbsp; scoring &nbsp; management</view>
				</view>
				<view class="view-box-10">
					<image src="../../static/给领导.png" class="logimg"></image>
				</view>
			</view>
			<!-- 中层互评部分 -->
			<view v-if="(!isLeaderRating && !isRting) || isGuest" class="view-box-08" style="display: flex;"
				@click="JumpToStaffTatingPage">
				<view class="view-box-09">
					<view class="text01">基层评分管理</view>
					<view class="text02">&nbsp;Grassroots&nbsp; scoring &nbsp; management</view>
				</view>
				<view class="view-box-10">
					<image src="../../static/给领导.png" class="logimg"></image>
				</view>
			</view>
			<view v-if="(!isLeaderRating && !isRting) || isGuest" class="view-box-08" style="display: flex;"
				@click="JumpToTatingPage">
				<view class="view-box-09">
					<view class="text01">中层互评管理</view>
					<view class="text02">&nbsp;Mid-level&nbsp; mutual &nbsp; evaluation management</view>
				</view>
				<view class="view-box-10">
					<image src="../../static/给领导.png" class="logimg"></image>
				</view>
			</view>
			<!--高层领导给中层评分-->
			<view v-if="(!isLeaderRating && isRting) || isGuest" class="view-box-08" style="display: flex;"
				@click="JumpToTatingPage">
				<view class="view-box-09">
					<view class="text01">中层考核管理</view>
					<view class="text02">&nbsp;Middle &nbsp; Level  &nbsp; Appraisal Management</view>
				</view>
				<view class="view-box-10">
					<image src="../../static/给领导.png" class="logimg"></image>
				</view>
			</view>


			<!-- <button class="xiaofei" @click="toggle">去消费</button> -->
		</view>
	</view>
</template>

<script setup>
	import {
		findpeople
	} from "@/api/shouye.js"
	import {
		UserDetails
	} from "@/store/UserDetails.js"
	import {
		onMounted
	} from "vue";
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	//传到后端的对象
	const datadx = ref({
		"roleId": '',
		"assessDate": '',
		"userId": '',
		"status": 0
	});
	//姓名下拉框
	const range = ref([])
	//
	const change = (e) => {
		console.log("e:", e);

	}

	// 默认显示给领导评分
	const isLeaderRating = ref(false);
	const isRting = ref(false);
	const isGuest = ref(false);
	const isRatings = ref(true);
	// 岗位和角色的ID
	const postId = ref(null);
	const roleId = ref(null);

	// 获取用户详细信息
	const UserDetail = UserDetails();

	const getUserText = () => {
		const user = UserDetail?.UserText;
		if (!user) return;

		const posts = user.posts || [];
		const roles = user.roles || [];

		postId.value = user.postIds?.length > 0 ?
			posts.find(post => post.postId === user.postIds[0])?.postId :
			null;

		roleId.value = user.roleIds?.length > 0 ?
			roles.find(role => role.roleId === user.roleIds[0])?.roleId :
			null;
		if (roleId.value === 100) {
			isLeaderRating.value = (true);
			isRatings.value=(false);
		}
		if (roleId.value === 102) {
			isRting.value = (true);
		}
		if (roleId.value === 1) {
			isGuest.value = (true);
			console.log("管理员");
		}
	};

	onLoad(() => {
		datadx.value.userId = UserDetails().UserText?.data.userId;
		// datadx.value.nickName=UserDetails().UserText.data.nickName;
		getUserText();
	})
	onShow(() => {
		datadx.value.userId = UserDetails().UserText?.data.userId;
		// datadx.value.nickName=UserDetails().UserText.data.nickName;
		getUserText();
	});

//查看评分
const chakan =()=>{
	uni.navigateTo({
		url: '/pages/yuangong/yuangong'
	});
}


	//按月份查询
	const SearchByMonth = () => {
		uni.navigateTo({
			url: '/pages/yue/yue'
		});
	}
	//按季度查询
	const QuarterlyEnquiry = () => {
		uni.navigateTo({
			url: '/pages/jidu/jidu'
		});
	}

	///评分跳转
	const JumpToTatingPage = () => {
		uni.navigateTo({
			url: '/pages/rating/rating'
		})
	}
	//员工跳转页面
	const JumpToStaffTatingPage = () => {
		uni.navigateTo({
			url: '/pages/rating/rating?isEmployee=1'
		})
	}
</script>

<style lang="scss">
	//总样式
	.view-box-01 {
		// border: 1px solid red;
		width: 100vw;
		height: 100vh;
		// background-image:url("../../static/底图.png");
		background-repeat: no-repeat;
		/*设置背景不重复*/
		/* background-attachment:fixed; /*背景图片不会随着页面的滚动而滚动。*/
		background: size 100%;

		/* 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。*/
		//标题盒子
		.view-box-02 {
			// border: 1px solid red;
			height: 26%;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;

			.view-box-02-01 {
				// border: 1px solid red;
				height: 120rpx;
				width: 90%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				// align-items:flex-stant;
			}

			//头部标题文字
			.view-box-03 {
				// border: 1px solid red;
				width: 450rpx;
				height: 80rpx;
				font-family: Noto Sans S Chinese, Noto Sans S Chinese;
				font-weight: 500;
				font-size: 60rpx;
				color: #FFFFFF;
				line-height: 84rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}

			//头部标题图片
			.view-box-04 {
				width: 45.54rpx;
				height: 39.13rpx;
			}

		}

		.view-box01 {
			width: 100vw;
			// border: 1px solid black;
			display: flex;
			flex-direction: column;
			align-items: center;

			.view-box-08 {
				width: 90%;
				height: 188rpx;
				// border: 1px solid black;
				margin-top: 20rpx;
				justify-content: space-between;
				background-color: white;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				box-shadow: 0rpx 2rpx 2rpx 2rpx rgba(0, 0, 0, 0.16);

				//标题
				.view-box-09 {
					width: 65%;

					// border: 1px solid black;
					//文字
					.text01 {
						font-size: 40rpx;
						width: 500rpx;
						height: 40rpx;
						margin-top: 64rpx;
						margin-left: 42rpx;
					}

					.text02 {
						font-family: Source Han Sans SC, Source Han Sans SC;
						// font-weight: 400;
						font-size: 18rpx;
						color: #232323;
						// line-height: 28rpx;
						// text-align: center;
						// font-style: normal;
						text-transform: none;
						margin-top: 10rpx;
						margin-left: 42rpx;
						margin-bottom: 54rpx;
					}
				}

				// 图片位置
				.view-box-10 {
					height: 100%;
					width: 100%-70%;
					// border: 1px solid black;
					display: flex;
					justify-content: center;
					/* 实现水平方向居中 */
					align-items: center;

					/* 实现垂直方向居中 */
					// 图片大小
					.logimg {
						width: 122rpx;
						height: 122rpx;
					}
				}
			}
		}
	}

	//标题英语
	.view-box-05 {
		width: 208rpx;
		height: 28rpx;
		font-family: Source Han Sans SC, Source Han Sans SC;
		font-weight: 500;
		font-size: 20rpx;
		color: #FFFFFF;
		line-height: 28rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
</style>